// DOM 元素
const newTopicBtn = document.getElementById('new-topic-btn');
const newTopicModal = document.getElementById('new-topic-modal');
const editTopicModal = document.getElementById('edit-topic-modal');
const closeModalButtons = document.querySelectorAll('.close-modal');
const newTopicForm = document.getElementById('new-topic-form');
const editTopicForm = document.getElementById('edit-topic-form');
const userInput = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');
const chatMessages = document.getElementById('chat-messages');
const topicItems = document.querySelectorAll('.topic-item');
const editTopicBtns = document.querySelectorAll('.edit-topic-btn');
const deleteTopicBtns = document.querySelectorAll('.delete-topic-btn');

// 初始化事件监听器
function initEventListeners() {
    // 新建话题按钮点击事件
    newTopicBtn.addEventListener('click', () => {
        newTopicModal.style.display = 'block';
    });
    
    // 关闭模态框按钮点击事件
    closeModalButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            newTopicModal.style.display = 'none';
            editTopicModal.style.display = 'none';
        });
    });
    
    // 点击模态框外部关闭模态框
    window.addEventListener('click', (event) => {
        if (event.target === newTopicModal) {
            newTopicModal.style.display = 'none';
        } else if (event.target === editTopicModal) {
            editTopicModal.style.display = 'none';
        }
    });
    
    // 发送按钮点击事件
    sendBtn.addEventListener('click', sendMessage);
    
    // 输入框回车事件
    userInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter' && !e.shiftKey && !userInput.disabled) {
            e.preventDefault();
            sendMessage();
        }
    });
    
    // 输入框输入事件，控制发送按钮状态
    userInput.addEventListener('input', () => {
        if (!userInput.disabled) {
            sendBtn.disabled = userInput.value.trim() === '';
        }
    });
    
    // 话题项点击事件
    topicItems.forEach(item => {
        item.addEventListener('click', (e) => {
            // 如果点击的是编辑或删除按钮，不执行切换话题操作
            if (e.target.closest('.edit-topic-btn') || e.target.closest('.delete-topic-btn')) {
                return;
            }
            const topicId = item.getAttribute('data-topic-id');
            switchTopic(topicId);
        });
    });
    
    // 编辑话题按钮点击事件
    editTopicBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.stopPropagation(); // 阻止事件冒泡
            const topicId = btn.getAttribute('data-topic-id');
            const topicTitle = btn.closest('.topic-item').querySelector('.topic-title').textContent;
            
            document.getElementById('edit-topic-id').value = topicId;
            document.getElementById('edit-topic-title').value = topicTitle;
            editTopicModal.style.display = 'block';
        });
    });
    
    // 删除话题按钮点击事件
    deleteTopicBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.stopPropagation(); // 阻止事件冒泡
            const topicId = btn.getAttribute('data-topic-id');
            if (confirm('确定要删除这个话题吗？')) {
                deleteTopic(topicId);
            }
        });
    });
    
    // 编辑话题表单提交事件
    editTopicForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const topicId = document.getElementById('edit-topic-id').value;
        const newTitle = document.getElementById('edit-topic-title').value.trim();
        
        if (newTitle) {
            updateTopicTitle(topicId, newTitle);
        }
    });
}

// 切换话题
function switchTopic(topicId) {
    window.location.href = `/switch_topic/${topicId}`;
}

// 删除话题
function deleteTopic(topicId) {
    window.location.href = `/delete_topic/${topicId}`;
}

// 更新话题标题
function updateTopicTitle(topicId, newTitle) {
    const form = document.createElement('form');
    form.method = 'post';
    form.action = `/update_topic_title/${topicId}`;
    
    const titleInput = document.createElement('input');
    titleInput.type = 'hidden';
    titleInput.name = 'title';
    titleInput.value = newTitle;
    
    form.appendChild(titleInput);
    document.body.appendChild(form);
    form.submit();
}

// 发送消息 - 支持流式响应
function sendMessage() {
    const message = userInput.value.trim();
    
    if (!message) return;
    
    // 清空输入框并禁用发送按钮
    userInput.value = '';
    sendBtn.disabled = true;
    
    // 添加用户消息到界面
    addMessageToUI('user', message);
    
    // 显示加载状态
    const loadingElement = addLoadingIndicator();
    
    // 创建服务器发送事件连接
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/send_message');
    xhr.setRequestHeader('Content-Type', 'application/json');
    
    // 用于存储机器人回复的完整内容
    let botMessageElement = null;
    let fullResponse = '';
    
    // 创建停止按钮并放在发送按钮旁边
    let stopBtn = document.createElement('button');
    stopBtn.textContent = '停止';
    stopBtn.classList.add('stop-button');
    stopBtn.style.backgroundColor = 'red';
    stopBtn.style.color = 'white';
    stopBtn.style.border = 'none';
    stopBtn.style.padding = '8px 16px';
    stopBtn.style.borderRadius = '4px';
    stopBtn.style.cursor = 'pointer';
    stopBtn.style.marginLeft = '8px';
    stopBtn.style.fontSize = '14px';
    
    // 找到发送按钮的父元素，并在旁边添加停止按钮
    if (sendBtn && sendBtn.parentNode) {
        sendBtn.parentNode.appendChild(stopBtn);
    }
    
    stopBtn.addEventListener('click', function() {
        // 中止请求
        xhr.abort();
        
        // 禁用停止按钮
        stopBtn.disabled = true;
        
        // 启用发送按钮
        sendBtn.disabled = false;
        
        // 如果正在显示加载状态，则移除它
        if (loadingElement && loadingElement.parentNode) {
            loadingElement.parentNode.removeChild(loadingElement);
        }
        
        console.log('生成已停止');
    });
    
    // 设置响应类型为文本
    xhr.responseType = 'text';
    
    // 监听进度事件以接收流式响应
    xhr.onprogress = function(event) {
        // 移除 event.lengthComputable 检查，因为在流式传输中通常无法预先知道总长度
        // 处理已接收的数据
        const data = xhr.response;
        
        // 解析数据块（格式：data: {json数据}\n\n）
        const chunks = data.split('\n\n');
        
        chunks.forEach(chunk => {
            if (chunk && chunk.startsWith('data:')) {
                try {
                    const jsonData = JSON.parse(chunk.substring(5)); // 移除 'data: ' 前缀
                    
                    if (jsonData.type === 'content') {
                        // 第一次收到内容时，创建机器人消息元素
                        if (!botMessageElement) {
                            // 移除加载指示器
                            if (loadingElement && loadingElement.parentNode) {
                                loadingElement.parentNode.removeChild(loadingElement);
                            }
                            
                            // 创建机器人消息元素但不立即添加内容
                            botMessageElement = document.createElement('div');
                            botMessageElement.classList.add('message', 'assistant');
                            
                            const contentDiv = document.createElement('div');
                            contentDiv.classList.add('message-content');
                            
                            const now = new Date();
                            const timeDiv = document.createElement('div');
                            timeDiv.classList.add('message-time');
                            timeDiv.textContent = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
                            
                            botMessageElement.appendChild(contentDiv);
                            botMessageElement.appendChild(timeDiv);
                            
                            // 移除欢迎消息（如果存在）
                            const welcomeMessage = chatMessages.querySelector('.welcome-message');
                            if (welcomeMessage) {
                                chatMessages.removeChild(welcomeMessage);
                            }
                            
                            chatMessages.appendChild(botMessageElement);
                        }
                        
                        // 更新消息内容 - 直接使用最新内容，避免重叠
                        fullResponse = jsonData.content;
                        
                        // 直接更新DOM内容
                        const contentDiv = botMessageElement.querySelector('.message-content');
                        contentDiv.innerHTML = formatMessageContent(fullResponse);

                        // 滚动到底部
                        chatMessages.scrollTop = chatMessages.scrollHeight;
                    }
                } catch (error) {
                    console.error('解析流式响应失败:', error);
                }
            }
        });
    };
    
    // 请求完成时的处理
    xhr.onload = function() {
        // 移除加载状态
        if (loadingElement && loadingElement.parentNode) {
            loadingElement.parentNode.removeChild(loadingElement);
        }
        
        // 移除停止按钮（如果存在）
        if (stopBtn && stopBtn.parentNode) {
            stopBtn.parentNode.removeChild(stopBtn);
        }
        
        if (xhr.status === 200) {
            // 解析最后一块数据（如果有）
            try {
                // 处理任何剩余的数据
                if (!botMessageElement) {
                    // 这意味着整个响应都在最后一块到达
                    // 寻找完整的JSON对象
                    const lastChunk = xhr.response.split('data: ').pop();
                    const jsonData = JSON.parse(lastChunk);
                    
                    if (jsonData.type === 'end') {
                        addMessageToUI('assistant', jsonData.content);
                    }
                }
            } catch (error) {
                console.error('解析最后一块响应失败:', error);
            }
        } else {
            // 显示错误消息
            if (loadingElement && loadingElement.parentNode) {
                loadingElement.parentNode.removeChild(loadingElement);
            }
            addMessageToUI('assistant', `抱歉，请求失败：${xhr.status}`);
            console.error('发送消息失败，HTTP状态码:', xhr.status);
        }
        
        // 启用发送按钮
        sendBtn.disabled = false;
    };
    
    // 请求出错时的处理
    xhr.onerror = function() {
        // 移除加载状态
        if (loadingElement && loadingElement.parentNode) {
            loadingElement.parentNode.removeChild(loadingElement);
        }
        
        // 移除停止按钮（如果存在）
        if (stopBtn && stopBtn.parentNode) {
            stopBtn.parentNode.removeChild(stopBtn);
        }
        
        // 显示错误消息
        addMessageToUI('assistant', '抱歉，出现了网络错误');
        console.error('发送消息网络错误');
        
        // 启用发送按钮
        sendBtn.disabled = false;
    };
    
    // 请求被中止时的处理
    xhr.onabort = function() {
        // 移除加载状态
        if (loadingElement && loadingElement.parentNode) {
            loadingElement.parentNode.removeChild(loadingElement);
        }
        
        // 移除停止按钮（如果存在）
        if (stopBtn && stopBtn.parentNode) {
            stopBtn.parentNode.removeChild(stopBtn);
        }
        
        // 如果已有部分内容，则显示部分回复
        if (fullResponse) {
            addMessageToUI('assistant', fullResponse);
            
            // 尝试获取当前topic_id并保存部分内容
            try {
                // 从页面上选中的话题项中获取topic_id
                const selectedTopic = document.querySelector('.topic-item.selected');
                let topicId;
                
                if (selectedTopic) {
                    topicId = selectedTopic.getAttribute('data-topic-id');
                } else {
                    // 或者从所有话题项中获取第一个
                    const firstTopic = document.querySelector('.topic-item');
                    if (firstTopic) {
                        topicId = firstTopic.getAttribute('data-topic-id');
                    }
                }
                
                if (topicId) {
                    // 发送POST请求保存部分内容到数据库
                    const saveXhr = new XMLHttpRequest();
                    saveXhr.open('POST', '/save_partial_response');
                    saveXhr.setRequestHeader('Content-Type', 'application/json');
                    
                    saveXhr.onload = function() {
                        if (saveXhr.status === 200) {
                            console.log('部分内容已保存到数据库');
                        } else {
                            console.error('保存部分内容失败:', saveXhr.status);
                        }
                    };
                    
                    saveXhr.onerror = function() {
                        console.error('保存部分内容网络错误');
                    };
                    
                    saveXhr.send(JSON.stringify({ 
                        content: fullResponse, 
                        topic_id: topicId 
                    }));
                } else {
                    console.error('无法获取当前话题ID，无法保存部分内容');
                }
            } catch (error) {
                console.error('保存部分内容时出错:', error);
            }
        } else {
            // 没有内容时显示停止提示
            addMessageToUI('assistant', '生成已停止');
        }
        
        // 启用发送按钮
        sendBtn.disabled = false;
        
        console.log('请求已中止');
    };
    
    // 发送请求
    xhr.send(JSON.stringify({ message: message }));
}

// 添加消息到界面
function addMessageToUI(sender, message) {
    const messageDiv = document.createElement('div');
    messageDiv.classList.add('message', sender);
    
    const contentDiv = document.createElement('div');
    contentDiv.classList.add('message-content');
    contentDiv.innerHTML = formatMessageContent(message);
    
    const now = new Date();
    const timeDiv = document.createElement('div');
    timeDiv.classList.add('message-time');
    timeDiv.textContent = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
    
    messageDiv.appendChild(contentDiv);
    messageDiv.appendChild(timeDiv);
    
    // 移除欢迎消息（如果存在）
    const welcomeMessage = chatMessages.querySelector('.welcome-message');
    if (welcomeMessage) {
        chatMessages.removeChild(welcomeMessage);
    }
    
    chatMessages.appendChild(messageDiv);
    
    // 滚动到底部
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

// 格式化消息内容，保留换行等格式
function formatMessageContent(content) {
    // 替换换行符为<br>标签
    return content.replace(/\n/g, '<br>');
}

// 添加加载指示器
function addLoadingIndicator() {
    const loadingDiv = document.createElement('div');
    loadingDiv.classList.add('message', 'assistant');
    
    const loadingContent = document.createElement('div');
    loadingContent.classList.add('message-content');
    
    const loadingIndicator = document.createElement('div');
    loadingIndicator.classList.add('loading');
    loadingIndicator.innerHTML = '<span></span><span></span><span></span>';
    
    loadingContent.appendChild(loadingIndicator);
    loadingDiv.appendChild(loadingContent);
    
    chatMessages.appendChild(loadingDiv);
    
    // 滚动到底部
    chatMessages.scrollTop = chatMessages.scrollHeight;
    
    return loadingDiv;
}

// 初始化应用
function initApp() {
    initEventListeners();
    sendBtn.disabled = !userInput.value.trim() || userInput.disabled;
    
    // 页面加载完成后，聊天内容区域自动滚动到底部
    setTimeout(() => {
        if (chatMessages) {
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
    }, 100);
}

// 当页面加载完成后初始化应用
window.addEventListener('DOMContentLoaded', initApp);